import React, { createRef, useEffect, useRef, useState } from 'react';
import styles from './index.module.scss';
import { useLocation, useNavigate } from 'ice';
import { observer, inject } from "mobx-react";
import { Input, Overlay, Tag } from '@alifd/next';
import { runInAction } from 'mobx';
import { Icon } from '@alifd/next';
import { DatePicker2 } from '@alifd/next';
const { RangePicker } = DatePicker2;
const { Popup } = Overlay;
function CardInput(props: {
    parentCardId?: string
    cardModel?: any
    colIndex: number
    cardId: string
}) {
    var cardModel = props.cardModel;
    const location = useLocation();
    const navigate = useNavigate();
    const pathname = location.pathname;
    const [currentCardData, setCurrentCardData] = useState<any>(null);
    const delCard = async (cardId) => {
        const cardModel = props.cardModel;
        // 先检查
        const cardData = await props.cardModel.getCardData(cardId);
        let childLen = cardData.cols.reduce((total, item) => {
            return total + item.cards.length;
        }, 0);
        if (childLen > 0) {
            alert('请删除子元素');
            return;
        }
        runInAction(async () => {
            cardModel.currentCard.cols[props.colIndex].cards = cardModel.currentCard.cols[props.colIndex].cards.filter(item => {
                return (item.id != cardId) && cardModel.cardData.find(item2 => {
                    return item2.id == item.id
                });
            });
            await cardModel.delCardData(cardId);
            cardModel.saveCurrentCard();
        });
        // 删除数据
        // cardModel.delCardData(cardId).then(async () => {
        //     // 看看有没有子元素,如果有子元素, 提示先删除子元素
        //     const cardData = await props.cardModel.getCardData(cardId);
        //     let childLen = cardData.cols.reduce((total, item) => {
        //         return total + item.cards.length;
        //     }, 0);
        //     if (childLen > 0) {
        //         alert('请删除子元素');
        //         return;
        //     }
        //     cardModel.currentCard.cols[props.colIndex].cards = cardModel.currentCard.cols[props.colIndex].cards.filter(item => {
        //         return item.id != cardId;
        //     });
        //     console.log(cardModel.currentCard, '-----------');
        //     cardModel.saveCurrentCard();
        // });

    }
    useEffect(() => {
        cardModel.getCardData(props.cardId).then(data => {
            setCurrentCardData(data);
        })
    }, []);
    const [dateVisible, setDateVisible] = useState(false);
    return currentCardData ? <div className={styles.inputWrap} style={{
    }} >
        <div className={styles.leftWrap}>
            <div className={styles.inputElemWrap}>
            <Input style={{
                width: '100%'
            }} value={currentCardData.title} size={'medium'} onChange={(value) => {
                runInAction(() => {
                    currentCardData.title = value;
                    cardModel.setCardData(props.cardId, currentCardData);
                });
            }} />
            </div>
            <div className={styles.inputBtnWrap}>
            <span style={{
                marginLeft: '10px',
                marginRight: '10px',
            }} onClick={() => {
                navigate(`${pathname}/${props.cardId}`);
            }}>拆分</span>
            <span style={{
                marginLeft: '10px',
                marginRight: '10px',
            }} onClick={() => {
                delCard(props.cardId);
            }}>删除</span>
            </div>
        </div>
        <div className={styles.rightWrap}>
            <Popup
                v2
                canCloseByOutSideClick={false}
                trigger={
                    currentCardData.date ? <span onClick={() => {
                        console.log(currentCardData.date);
                        setDateVisible(!dateVisible)
                    }}>
                        {getDateDay(currentCardData.date[0])}-{getDateDay(currentCardData.date[1])}
                    </span> : <Icon type={'calendar'} onClick={() => {
                        setDateVisible(!dateVisible)
                    }} />
                } visible={dateVisible}>
                <div style={{
                }}>
                    <RangePicker size={'small'} onChange={(value) => {
                        currentCardData.date = value;
                        cardModel.setCardData(props.cardId, currentCardData);
                        setDateVisible(false)
                    }} />
                </div>
            </Popup>
        </div>

    </div> : null
}
function getDateDay(dateStr) {
    let date = new Date(dateStr);
    return `${date.getMonth() + 1}/${date.getDate()}`
}
export default inject('cardModel')(observer(CardInput));
